<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>代码</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-sm-6">
                        <div class="panel">
                            <div class="panel-heading">
                                默认选项卡<code>.nav-tabs-default</code>
                            </div>
                            <div class="panel-body">
                                <div class="nav-tabs-default">
                                    <ul class="nav nav-tabs ">
                                        <li class="active">
                                            <a href="#tab1" data-toggle="tab">用户管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab2" data-toggle="tab">配置管理</a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                aria-expanded="false">
                                                更多选项
                                                <i class="fa fa-caret-down"></i>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#tab3" data-toggle="tab">系统设置</a>
                                                </li>
                                                <li>
                                                    <a href="#tab4" data-toggle="tab">菜单设置</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab1">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab2">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab3">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab4">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                垂直选项卡<code>.nav-tabs-vertical</code>
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-vertical">
                                    <ul class="nav nav-tabs ">
                                        <li class="active">
                                            <a href="#tab21" data-toggle="tab">用户管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab22" data-toggle="tab">配置管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab23" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab24" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab21">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab22">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab23">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab24">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                简易选项卡<code>.nav-tabs-easy</code>
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-easy">
                                    <ul class="nav nav-tabs ">
                                        <li class="active">
                                            <a href="#tab51" data-toggle="tab">用户管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab52" data-toggle="tab">配置管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab53" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab54" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab51">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab52">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab53">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab54">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                卡片选项卡<code>.nav-tabs-card</code>
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-card">
                                    <ul class="nav nav-tabs ">
                                        <li class="active">
                                            <a href="#tab71" data-toggle="tab"><small>用户管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab72" data-toggle="tab"><small>配置管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab73" data-toggle="tab"><small>系统设置</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab74" data-toggle="tab"><small>菜单设置</small></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab71">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab72">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab73">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab74">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                两端对齐<code>.nav-justified</code>
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-easy">
                                    <ul class="nav nav-tabs nav-justified">
                                        <li class="active">
                                            <a href="#tab91" data-toggle="tab"><small>用户管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab92" data-toggle="tab"><small>配置管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab93" data-toggle="tab"><small>系统设置</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab94" data-toggle="tab"><small>菜单设置</small></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab91">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab92">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab93">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab94">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="panel">
                            <div class="panel-heading">
                                反向选项卡
                            </div>
                            <div class="panel-body">
                                <div class="nav-tabs-default">
                                    <ul class="nav nav-tabs nav-tabs-reverse">
                                        <li class="active">
                                            <a href="#tab11" data-toggle="tab">用户管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab12" data-toggle="tab">配置管理</a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                aria-expanded="false">
                                                更多选项
                                                <i class="fa fa-caret-down"></i>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#tab13" data-toggle="tab">系统设置</a>
                                                </li>
                                                <li>
                                                    <a href="#tab14" data-toggle="tab">菜单设置</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab11">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab12">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab13">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab14">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                反向垂直选项卡
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-vertical">
                                    <ul class="nav nav-tabs nav-tabs-reverse ">
                                        <li class="active">
                                            <a href="#tab41" data-toggle="tab">用户管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab42" data-toggle="tab">配置管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab43" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab44" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab41">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab42">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab43">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab44">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                反向简易选项卡
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-easy">
                                    <ul class="nav nav-tabs nav-tabs-reverse ">
                                        <li class="active">
                                            <a href="#tab61" data-toggle="tab">用户管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab62" data-toggle="tab">配置管理</a>
                                        </li>
                                        <li>
                                            <a href="#tab63" data-toggle="tab">系统设置</a>
                                        </li>
                                        <li>
                                            <a href="#tab64" data-toggle="tab">菜单设置</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab61">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab62">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab63">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab64">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                反向卡片选项卡
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-card">
                                    <ul class="nav nav-tabs nav-tabs-reverse">
                                        <li class="active">
                                            <a href="#tab81" data-toggle="tab"><small>用户管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab82" data-toggle="tab"><small>配置管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab83" data-toggle="tab"><small>系统设置</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab84" data-toggle="tab"><small>菜单设置</small></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab81">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab82">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab83">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab84">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                两端对齐<code>.nav-justified</code>
                            </div>
                            <div class="panel-body">
                                <div class=" nav-tabs-card">
                                    <ul class="nav nav-tabs nav-justified">
                                        <li class="active">
                                            <a href="#tab111" data-toggle="tab"><small>用户管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab112" data-toggle="tab"><small>配置管理</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab113" data-toggle="tab"><small>系统设置</small></a>
                                        </li>
                                        <li>
                                            <a href="#tab114" data-toggle="tab"><small>菜单设置</small></a>
                                        </li>
                                    </ul>
                                    <div class="tab-content panel-body">
                                        <div class="tab-pane active" id="tab111">
                                            用户管理
                                        </div>
                                        <div class="tab-pane" id="tab112">
                                            配置管理
                                        </div>
                                        <div class="tab-pane" id="tab113">
                                            系统设置
                                        </div>
                                        <div class="tab-pane" id="tab114">
                                            菜单设置
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>